<template>
  <div class="cetification-box">
    <el-card class="cetification-card-box">
      <template #header>
        <div class="cetification-card-header">
          <span>实名信息</span>
        </div>
      </template>
      <div class="cetification-card-main">
        <div class="cetification-card-text">
          <el-icon color="gray">
            <InfoFilled />
          </el-icon>
          <span>
            完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。
          </span>
        </div>
        <table class="cetification-table" v-if="userInfo.authStatus == 1">
          <tr>
            <td>用户姓名</td>
            <td>{{ userInfo.name }}</td>
          </tr>
          <tr>
            <td>证件类型</td>
            <td>{{ userInfo.certificatesType == 10 ? "身份证" : "户口本" }}</td>
          </tr>
          <tr>
            <td>证件号码</td>
            <td>{{ userInfo.certificatesNo }}</td>
          </tr>
        </table>
        <div class="cetification-form" v-else>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            label-width="120px"
            :rules="rules"
          >
            <el-form-item label="用户姓名" prop="name">
              <el-input
                placeholder="请输入用户的姓名"
                v-model="ruleForm.name"
              />
            </el-form-item>
            <el-form-item label="证件类型" prop="certificatesType">
              <el-select
                placeholder="请选择证件类型"
                class="select-box"
                v-model="ruleForm.certificatesType"
              >
                <el-option
                  :label="item.name"
                  :value="item.value"
                  v-for="item in certainType"
                  :key="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="certificatesNo">
              <el-input
                placeholder="请输入证件号码"
                v-model="ruleForm.certificatesNo"
              />
            </el-form-item>
            <el-form-item label="上传证件" prop="certificatesUrl">
              <el-upload
                ref="uploadRef"
                action="/api/oss/file/fileUpload?fileHost=userAuah"
                list-type="picture-card"
                :limit="1"
                :on-exceed="exceedUpload"
                :on-remove="removeUpload"
                :on-preview="previewUpload"
                :on-success="successUpload"
              >
                <img
                  src="@/assets/imgs/auth_example.png"
                  style="height: 100%; width: 100%"
                />
              </el-upload>

              <el-dialog v-model="dialogVisible">
                <img
                  w-full
                  alt="Preview Image"
                  v-if="ruleForm.certificatesUrl"
                  :src="ruleForm.certificatesUrl"
                  style="width: 100%; height: 100%"
                />
              </el-dialog>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getUserCertation"
                >提交</el-button
              >
              <el-button @click="resetForm">重写</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  reqGetUserInfo,
  reqCertainType,
  reqUserCertation,
} from "@/api/UserPage";
export default {
  name: "cetificationPage",
  data() {
    return {
      ruleForm: {
        certificatesNo: "",
        certificatesType: "",
        certificatesUrl: "",
        name: "",
      },
      rules: {
        certificatesNo: [
          {
            required: true,
            validator: this.validatorNo,
            trigger: "blur",
          },
        ],
        certificatesType: [
          {
            required: true,
            validator: this.validatorType,
            trigger: "change",
          },
        ],
        certificatesUrl: [
          {
            required: true,
            validator: this.validatorUrl,
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            validator: this.validatorName,
            trigger: "blur",
          },
        ],
      },
      fileList: [],
      dialogImageUrl: "",
      userInfo: {},
      certainType: [],
      dialogVisible: false,
    };
  },
  methods: {
    async getUserInfo() {
      let result = await reqGetUserInfo();
      if (result.code == 200) {
        this.userInfo = result.data;
      }
    },
    async getCertainType() {
      let result = await reqCertainType();
      if (result.code == 200) {
        this.certainType = result.data;
      }
    },
    async getUserCertation() {
      try {
        await this.$refs.ruleFormRef.validate();
        await reqUserCertation(this.ruleForm);
        this.$message({
          type: "success",
          message: "认证成功",
        });
        this.getUserInfo();
      } catch {
        this.$message({
          type: "error",
          message: "认证失败",
        });
      }
    },
    exceedUpload() {
      this.$message({
        type: "error",
        message: "图片只能上传一张",
      });
    },
    removeUpload() {
      this.ruleForm.certificatesUrl = "";
    },
    previewUpload() {
      this.dialogVisible = true;
    },
    successUpload(response) {
      this.$refs.ruleFormRef.clearValidate("certificatesUrl");
      this.ruleForm.certificatesUrl = response.data;
    },
    resetForm() {
      this.$refs.ruleFormRef.resetFields();
      this.$refs.uploadRef.clearFiles();
    },
    // 正则校验
    validatorNo(rule, value, callback) {
      const reg =
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      const hkb = /^\d{9}$/;
      if (reg.test(value) || hkb.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的身份证号码或者户口本号码"));
      }
    },
    validatorType(rule, value, callback) {
      if (value == "10" || value == "20") {
        callback();
      } else {
        callback(new Error("请选择证件类型"));
      }
    },
    validatorUrl(rule, value, callback) {
      if (value.length) {
        callback();
      } else {
        callback(new Error("请上传证件照"));
      }
    },
    validatorName(rule, value, callback) {
      const reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的中国人的名字"));
      }
    },
  },
  mounted() {
    this.getUserInfo();
    this.getCertainType();
  },
};
</script>

<style lang="scss" scoped>
.cetification-box {
  .cetification-card-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .cetification-card-text {
      color: gray;
    }

    .cetification-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #e2e1e1;
      margin-bottom: 20px;
      margin-top: 20px;

      tr {
        td {
          border: 1px solid #e2e1e1;
          padding: 14px;
          font-size: 14px;
        }

        td:nth-child(2n + 1) {
          background-color: #f5f7fa;
          font-weight: 900;
          text-align: center;
          color: #606266;
          width: 30%;
        }
      }
    }

    .cetification-form {
      width: 550px;
      margin-top: 30px;

      .select-box {
        width: 100%;
      }
    }
  }
}
</style>
